<template>
    <transition name="fade">
        <div class="brs-number-keyborad" v-if="open" :style=" 'z-index: ' + zIndex ">
            <div class="brs-number-keyborad__wrapper">
                <div class="brs-number-keyborad__keys">
                    <div class="brs-key" v-for="item in keys" :key="item" @click="clickHeadle(item, true)">
                        <div>{{item}}</div>
                    </div>
                    <template v-if="type === 'number'">
                        <div class="brs-key lg" @click="clickHeadle('0', true)">
                            <div>0</div>
                        </div>
                        <div class="brs-key" @click="clickHeadle('.', pointState)">
                            <div>·</div>
                        </div>
                    </template>
                    <template v-if="type === 'password'">
                        <div class="brs-key" @click="clickHeadle('close', true)">
                            <div>取消</div>
                        </div>
                        <div class="brs-key" @click="clickHeadle('0', true)">
                            <div>0</div>
                        </div>
                        <div class="brs-key" @click="clickHeadle('X', true)">
                            <div>X</div>
                        </div>
                    </template>
                </div>
                <div class="brs-number-keyborad__sidebar" v-if="type === 'number'">
                    <div class="brs-key" @click="clickHeadle('X', deleteState)">
                        <div>X</div>
                    </div>
                    <div class="brs-key complete" @click="clickHeadle('submit', true)">
                        <div class="bg-main">完成</div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'brsNumberKeyborad',
    props: {
        max: {
            type: [Number, String],
            default: 0
        }, // 最大值
        point: {
            type: [Number, String],
            default: 2
        }, // 小数点后几位
        length: {
            type: [Number, String],
            default: 6
        },
        type: {
            type: String,
            default: 'number'
        }, // number：数字键盘 , password：数字密码键盘
        open: {
            type: Boolean,
            default: false
        },
        zIndex: {
            type: [Number, String],
            default: 999
        }
    },
    data(){
        return {
            keys: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            value: ''
        }
    },
    watch: {
        open(){
            this.value = ''
        },
        type(){
            this.value = ''
        }
    },
    computed: {
        // 小数点的可选状态
        pointState(){
            if(this.value){
                if(this.value.indexOf('.') > 0){
                    return false
                }else{
                    return true
                }
            }else{
                return false;
            }
        },
        deleteState(){
            return !!this.value.length;
        }
    },
    methods: {
        clickHeadle(key, state){
            if(!state){
                return false
            }
            if(key === 'X'){
                this.value = this.value.substring(0, this.value.length - 1)
                this.$emit('change', this.value);
            }else if(key === 'submit'){
                this.$emit('update:open', false);
                this.$emit('confirm', this.value);
            }else if(key === 'close'){
                this.$emit('update:open', false);
                this.$emit('cancel', this.value);
            }else{
                let value = JSON.parse(JSON.stringify(this.value))
                value += key;
                if(this.type === 'number'){
                    if(value.indexOf('.') > 0){
                        let arr = value.split('.')
                        if(arr[1] && arr[1].length > this.point){
                            value = value.substring(0, value.length - 1)
                        }
                    }
                    if(this.max !== 0){
                        if(Number(value) >= Number(this.max)){
                            value = value.substring(0, value.length - 1)
                        }
                    }
                }
                if(this.type === 'password'){
                    if(value.length >= this.length){
                        value = value.substring(0, this.length)
                        this.$emit('update:open', false);
                        this.$emit('confirm', value);
                    }
                }
                this.value = value
                this.$emit('change', value);
            }
        }
    }
}
</script>

<style lang="less" scoped>
.fade-enter-active, .fade-leave-active {
     animation: moveIn 0.3s;
}
.fade-enter, .fade-leave-to, .fade-leave-active {
    animation: moveOut 0.3s;
}
@keyframes moveIn {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0%);
        animation-fill-mode: forwards
    }
}
@keyframes moveOut {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(100%);
        animation-fill-mode: forwards
    }
}
.brs-number-keyborad{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    background-color: #f2f3f5;
    padding-bottom: 22px;
    .brs-number-keyborad__wrapper{
        display: flex;
        padding: 10px 0 0 10px;
        .brs-number-keyborad__keys{
            flex: 3;
            display: flex;
            flex-wrap: wrap;
        }
        .brs-number-keyborad__sidebar{
            flex: 1;
            display: flex;
            flex-flow: column;
            .brs-key{
                & > div{
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 10px;
                    bottom: 10px;
                    height: auto;
                }
            }
        }
        .brs-key{
            position: relative;
            flex: 1;
            font-size: 40px;
            flex-basis: 33%;
            box-sizing: border-box;
            padding: 0 10px 10px 0;
            &.lg{
                flex-basis: 66.66%;
            }
            & > div{
                background-color: #ffffff;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 110px;
                border-radius: 15px;
                &:active{
                    opacity: .6;
                }
            }
            &.complete{
                div{
                    background-color: @default-main-color;
                    color: #ffffff;
                }
            }
            &.disabled > div{
                background-color: #ddd;
                color: #999;
                &:active{
                    opacity: 1;
                }
            }
        }
    }
}

</style>